<template>
    <top-header></top-header>
    <div class="red_line__a"></div>
    <div class="r_t_e">
        <div class="content">
            <div class="blog-card">
                <h1 class="title">
                    <input
                        type="text"
                        name=""
                        id=""
                        v-model="blog.title"
                        placeholder="输入标题（50字内）"
                    />
                </h1>
                <div class="triangle"></div>
                <span class="abstract"
                    ><input
                        type="text"
                        name=""
                        id=""
                        v-model="blog.abstract"
                        placeholder="输入描述（200字内）"
                /></span>
                <p class="category">
                    <input
                        type="text"
                        name=""
                        id=""
                        v-model="blog.category_id"
                        placeholder="添加分类"
                    />
                </p>
                <p class="time">2002-00-00</p>
            </div>
            <div class="describe"></div>
        </div>

        <div class="r_t_e__editir">
            <rich-text-editor
                v-model="blog.content"
                class="r_t_e__editir_self"
            ></rich-text-editor>
        </div>

        <div class="r_t_e__submit">
            <!-- <button >提交</button>
            <button>暂存</button>
            <button >取消</button> -->
            <div @click="Submit">Submit</div>
            <div>Staging</div>
            <div @click="Cancle">Cancle</div>
        </div>
    </div>
    <bottom-footer></bottom-footer>
</template>

<script setup>
import { onMounted, reactive, inject } from "vue";
import RichTextEditor from "../../components/RichTextEditor.vue";
// import { epStore } from "../../common/store.js";
import { useRouter } from "vue-router";
// import TopHeader from "../components/TopHeader.vue"
import TopHeader from "../../components/TopHeader.vue";
import BottomFooter from "../../components/BottomFooter.vue";

// const store_data = epStore();
const axios = inject("axios");
const router = useRouter();

const blog = reactive({
    id: "",
    data: "",
    title: "",
    abstract: "",
    category_id: "",
    content: "",
});

// 提交按钮
const Submit = async () => {
    let headers = {
        authorization: localStorage.getItem("TOKEN"),
    };
    // console.log(headers.authorization);
    let req_msg = {
        blog_title: blog.title,
        blog_abstract: blog.abstract,
        blog_category_id: blog.category_id,
        blog_content: blog.content,
        blog_id: blog.id,
    };
    // console.log(headers);

    let res = null;
    if (blog.id) {
        res = await axios.put("/blog/updata", req_msg, { headers: headers });
        console.log(req_msg);
    } else {
        res = await axios.post("/blog/upload", req_msg, { headers: headers });
    }

    // console.log(res);
    if (res.data.code === 200) {
        router.push("/backstage/manage-blog");
    }
};

// 取消
const Cancle = () => {
    router.push("/backstage/manage-blog");
};

// 获取
async function getBlog() {
    blog.id = router.currentRoute.value.query.blog_id; // 获取url中的blog_id
    // console.log(blog.id);
    if (blog.id) {
        let res_data = await axios.get(`/blog/detail?blog_id=${blog.id}`);
        // 将值赋给富文本编辑器
        blog.title = res_data.data[0].blog_title;
        blog.abstract = res_data.data[0].blog_abstract;
        blog.category_id = res_data.data[0].blog_category_id;
        blog.content = res_data.data[0].blog_content;
    }
}

onMounted(() => {
    getBlog();
});
</script>

<style lang="scss" scoped>
.red_line__a {
    background-color: var(--main-color-b);
    // background-color: #ffffff;
    height: 2px;
}

.r_t_e__editir {
    margin: 0 auto;
    border-left: 2px solid var(--main-color-b);
    box-shadow: 2px 2px 5px rgba(92, 92, 92, 0.4);
}

.r_t_e {
    margin: 0 auto;
    // width: 1200px;
    width: 75%;
    .content {
        font-size: 16px;

        .blog-card {
            box-shadow: 2px 2px 5px rgba(92, 92, 92, 0.4);
            background-color: #FFFFFF;

            // border-radius: 4px;

            // background-image: linear-gradient(
            //         135deg,
            //         #cfcfcf 50%,
            //         #764ba200 100%
            //     ),
            //     url("../../../public/356252841349189.png");
            // background-image: linear-gradient(135deg, #667eea4d 0%, #764ba23a 100%);
            padding: 10px 0 0 10px;
            margin-bottom: 16px;

            .title {
                margin: 0 auto;
                input {
                    font-size: 32px;
                    font-weight: 900;
                    width: 100%;
                    overflow: visible;
                    word-break: break-all;
                }
            }
            border-left: 2px solid var(--main-color-b);

            .triangle {
                // z-index: -1;
                position: absolute;
                background-color: #db3450;
                height: 20px;
                width: 20px;
                transform: translate(-11px, -30px);
                -webkit-clip-path: polygon(0 100%, 100% 50%, 0 0);
                clip-path: polygon(0 100%, 40% 50%, 0 0);
            }
            .line--wrap {
                transform: translate(-14px, 0);
            }
            .line--a {
                display: inline-block;
                height: 30px;
                width: 150px;
                background-color: var(--main-color-b);
                // border-bottom: 8px solid var(--main-color-b) ;
            }
            .line--b {
                display: inline-block;
                margin-left: 1px;
                height: 30px;
                width: 3px;
                background-color: var(--main-color-b);
                // border-bottom: 8px solid var(--main-color-b) ;
            }
            .line--c {
                display: inline-block;
                margin-right: 1px;
                height: 34px;
                width: 4px;
                background-color: var(--main-color-b);
                // border-bottom: 8px solid var(--main-color-b) ;
            }

            .abstract {
                input {
                    text-shadow: 2px 2px 5px rgba(92, 92, 92, 0.5);
                    font-size: 14px;
                    font-weight: 100;
                    color: rgb(69, 69, 69);
                    // margin: 0 auto;
                    width: 100%;
                }
                width: 100%;
                height: 80px;
                padding-right: 30%;
                display: block;
            }

            .category {
                input {
                    font-size: 16px;
                }
                margin: 0 auto;
            }

            .time {
                input {
                    font-size: 16px;
                }
                margin: 0;
            }
        }
        // .describe {
        // }
    }
    .r_t_e__submit {
        // overflow: hidden;
        margin: 20px 0 10px 0;
        height: 40px;
        display: flex;
        user-select: none;
        // justify-content: space-between;
        // display: inline-block;
        div {
            cursor: pointer;
            text-align: center;
            width: 130px;
            font-weight: 100;
            font-size: 30px;
            white-space: nowrap;
        }
        div:hover {
            color: var(--main-color-a);
        }
    }
}
</style>
